/**
    用户列表页
*/

<template>
    <div>
        <!--操作按钮-->
        <div>
            <el-button type="info" @click="dialogFormVisible = true">添加用户</el-button>
            <el-button type="danger" @click="eventDelete(2)">批量删除</el-button>
        </div>

        <!--显示-->
        <div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column  label="地址">
                    <template slot-scope="scope">
                        {{  scope.row.isDeleted }}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--弹出框-->
        <div>
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="用户姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录名" :label-width="formLabelWidth">
                        <el-input v-model="form.loginname" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" :label-width="formLabelWidth">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="eventSubmitUser">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            form: {
                name: '', //用户姓名
                loginname: '', //登录名
                password: '' //登录密码
            },
            formLabelWidth: '120px',
            multipleSelection:[]
        };
    },
    mounted() {
        this.onloadData()
    },
    methods: {

        //批量删除
        eventDelete(val){

            if(this.multipleSelection.length<=0){
                this.$message.error('请至少选择一条数据再操作')
                return
            }

            let url=this.$baseUrl + '/system/user'
            let data = this.multipleSelection
            if(val==1){
                //批量物理删除

            }
            else if(val==2){
                //批量逻辑删除
                this.$http.put(url,data).then(res=>{
                    if(res.data.state){
                        //删除成功，刷新列表
                        this.onloadData()
                    }
                })
            }
        },
        //加载数据列表
        onloadData() {
            let url = this.$baseUrl + '/system/user'
            this.$http.get(url).then(res => {
                if (res.data.state) {
                    this.tableData = res.data.data
                }
            })
        },

        //弹框提交按钮事件
        eventSubmitUser() {

            let url = this.$baseUrl + '/system/user'
            let data = {
                "name": this.form.name,
                "loginName": this.form.loginname,
                "password": this.form.password,
                "state": "0"
            }
            this.$http.post(url, data).then(res => {
                console.log(res);
                if (res.data.state) {
                    this.dialogFormVisible = false //提交成功，弹框不显示

                    //提交成功，刷新页面
                    this.onloadData()
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
};
</script>